<template>
     <div><h2>客房列表</h2></div>
     <div>
        <el-button type="primary">添加客房</el-button>
        <el-button type="success" @click="handleDelsClick()">删除客房</el-button>
        <el-button type="info">导入数据</el-button>
        <el-button type="warning">导出数据</el-button>
     </div>
    <el-table :data="tableData" stripe  border  style="width: 100%" ref="multipleTableRef">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="roomid" label="ID" width="180" />
      <el-table-column prop="rnmb" label="编号" width="180" />
      <el-table-column prop="rtype" label="类型" />
      <el-table-column prop="price" label="价格" width="180" />
      <el-table-column prop="rpic" label="封面" width="180"  show-overflow-tooltip />
      <el-table-column prop="ydstate" label="预定状态" />
      <el-table-column prop="ustate" label="使用状态" width="180" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
           <el-button link type="danger" size="small"  @click="handleDelClick(scope.$index)">删除</el-button>
           <el-button link type="primary" size="small" @click="handleUpdateClick(scope.$index)">更新</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 25]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRow"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
   </div>
  </template>
<script setup>
     import { reactive,ref } from 'vue'
     const multipleTableRef = ref();
     //`roomid`,`rnmb`,`rtype`,`price`,`rpic`,`ydstate`,`ustate`,
     const tableData = [
        { roomid:1,rnmb:'3-302',rtype:1,price:220,rpic:'Table 组件提供了单选的支持， 只需要配置 highlight-current-row 属性即可实现单选。 之后由 current-change 事件来管理选中时触发的事件，它会传入 currentRow，oldCurrentRow',ydstate:1,ustate:1},
        { roomid:2,rnmb:'3-303',rtype:2,price:240,rpic:'222',ydstate:1,ustate:1},
        { roomid:3,rnmb:'4-102',rtype:3,price:300,rpic:'333',ydstate:2,ustate:1}
     ]
   //删除多条
   function handleDelsClick(){
         const rows = multipleTableRef.value.getSelectionRows(); //getSelectionRows 返回当前选中的行
         console.log("rows",rows);
         if(rows){
          rows.forEach(function(obj,el){
            // console.log(obj, el);
            console.log("id",obj.roomid);
          });
         }
   }
     //删除单条数据
   function handleDelClick(i){
        alert("删除");
        console.log("参数",i) ;// i是索引号
        console.log(tableData[i].roomid)
     
   }
  
   //更新处理
   function handleUpdateClick(i){
        alert("更新");
   }


   //分页有关 的
    const currentPage = ref(2); //当前页码
    const pageSize = ref(5) ; //每页显示5条数据
    const small = ref(false); //false 非小型分页 
    const background = ref(true) //没有背景
    const disabled = ref(false) //有效
    const totalRow = ref(30)
  
    function handleSizeChange(val){  //当每页条数变化时触发
      alert(val);
    }
    function handleCurrentChange(val){ //跳转到第几页时触发
      alert(val);
    }
</script>